<clr-modal [(clrModalOpen)]="opened">
    <h3 class="modal-title">{{'APP_NAMESPACE_ADD'|translate}}</h3>
    <div class="modal-body modal-height">
        <form clrForm #namespaceForm="ngForm">
            <clr-input-container>
                <label>{{'APP_NAME'|translate}}:</label>
                <input clrInput size=45 maxlength="30" [(ngModel)]="namespace" pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])"
                       name="name" required>
                <clr-control-error>{{'NAMESPACE_INVALID'|translate}}</clr-control-error>
            </clr-input-container>
        </form>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline" (click)="onCancel()"
                    [disabled]="isSubmitGoing">{{'APP_CANCEL'|translate}}</button>
            <button type="submit" class="btn btn-primary" [disabled]="namespaceForm.invalid"
                    (click)="onSubmit()">{{'APP_COMMIT'|translate}}
            </button>
        </div>
    </div>
</clr-modal>